<template>
  <div class="big_box">
    <el-upload
      :action="http + '/admin/MemberApply/upload'"
      :multiple="false"
      :name="'img'"
      v-show="false"
    >
      上传
    </el-upload>
    <div class="conter_box">
      <div class="conter_item_left">
        <div>
          <div class="img_box">
            <img v-if="qylogo" :src="qylogo" alt="" />
          </div>
          <div class="box_title">
            <p>
              {{ qyname.split("/")[0]
              }}{{ qyname.includes("/") ? qyname.split("/")[1] : "" }}
            </p>
          </div>
        </div>
        <div class="no_copy" v-if="!http.includes('6868618')">
          Copyright &copy; 2020-2023.All Rights Reserved. 鲁ICP备14014132号-5
        </div>
        <div class="no_copy" v-else>
          Copyright &copy; 2020-2023.All Rights Reserved.
          <a
            style="color: #fff"
            target="_blank"
            href="https://beian.miit.gov.cn/#/Integrated/index"
            >鲁ICP备19031581号-5</a
          >
        </div>
      </div>
      <div class="conter_item_right">
        <div class="positionA"></div>
        <div class="positionB"></div>
        <div class="positionC">
          <div class="box_form">
            <div class="box_form_title">
              <p>学习报名</p>
            </div>
            <el-form
              label-position="left"
              label-width="120px"
              :model="formLabelAlign"
              v-loading="loading"
            >
              <el-form-item label="培训大类" required>
                <el-select
                  v-model="formLabelAlign.gz"
                  placeholder="请选择"
                  @change="gzChange"
                >
                  <el-option
                    v-for="item in GZList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <div
                v-if="
                  http.indexOf('taihua') == -1 ||
                  (http.indexOf('taihua') != -1 &&
                    formLabelAlign.gz != '学历提升')
                "
              >
                <el-form-item
                  :label="
                    item.field_type != 'json' && item.field_type != 'jsonTree'
                      ? item.label
                      : ''
                  "
                  v-for="item in fromList"
                  :key="item.id"
                  :required="Boolean(item.selected)"
                  v-show="item.isshow"
                  :class="item.field_type == 'json' ? 'classJson' : ''"
                >
                  <span
                    v-if="item.hint"
                    style="color: red; line-height: 20px !important"
                    >{{ item.hint }}</span
                  >
                  <el-cascader
                    style="width: 100%"
                    v-if="
                      item.field_type == 'select' && item.label == '培训科目'
                    "
                    v-model="subjectlist"
                    @change="subChange"
                    class="filter-item"
                    placeholder="请选择培训科目"
                    clearable
                    :options="subjectListTree"
                    :props="{ label: 'title', value: 'id', key: 'id' }"
                    ref="elcascader"
                  ></el-cascader>
                  <el-input
                    v-model="item.placeholder"
                    v-else-if="item.field_type == 'input'"
                    @change="inputChange(item)"
                  ></el-input>
                  <!-- <el-date-picker
                    v-else-if="item.field_type == 'datetimeRange'"
                    v-model="item.placeholder"
                    @change="inputChange(item, 'time')"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker> -->
                  <div v-else-if="item.field_type == 'datetimeRange'">
                    <el-date-picker
                      v-model="item.placeholder[0]"
                      type="date"
                      value-format="yyyy-MM-dd"
                      @change="inputChange(item, 'time')"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    <span>至</span>
                    <el-input
                      v-model="item.placeholder[1]"
                      v-if="item.placeholder[1] == '至今'"
                      readonly
                      @click.native="clickInput(item)"
                    ></el-input>
                    <el-date-picker
                      v-else
                      v-model="item.placeholder[1]"
                      type="date"
                      value-format="yyyy-MM-dd"
                      @change="inputChange(item, 'time')"
                      @blur="
                        () => {
                          !item.placeholder[1]
                            ? (item.placeholder[1] = '至今')
                            : item.placeholder[1];
                          $forceUpdate();
                        }
                      "
                      placeholder="选择日期"
                      ref="updataDatePicker"
                    >
                    </el-date-picker>
                  </div>
                  <el-input
                    v-model="item.placeholder"
                    type="textarea"
                    v-else-if="item.field_type == 'textarea'"
                    @change="inputChange(item)"
                    :maxlength="1000"
                    :show-word-limit="item.label == '学习工作经历'"
                    :rows="item.label == '学习工作经历' ? 5 : 2"
                  ></el-input>
                  <el-input
                    v-model="item.placeholder"
                    v-else-if="item.field_type == 'number'"
                    type="number"
                    @change="inputChange(item)"
                  ></el-input>
                  <el-radio-group
                    v-model="item.placeholder"
                    v-else-if="item.field_type == 'radio'"
                    @change="inputChange(item)"
                  >
                    <el-radio
                      :label="el.e"
                      v-for="el in JSON.parse(item.options)"
                      :key="el.e"
                      >{{ el.e }}</el-radio
                    >
                  </el-radio-group>
                  <el-select
                    style="width: 100%"
                    @change="inputChange(item)"
                    v-model="item.placeholder"
                    placeholder="请选择"
                    v-else-if="
                      item.field_type == 'select' &&
                      item.label != '培训科目' &&
                      item.field_id != 'region_id' &&
                      item.options
                    "
                  >
                    <el-option
                      v-for="it in JSON.parse(item.options)"
                      :key="it.e"
                      :label="it.label ? it.label : it.e"
                      :value="it.e"
                    >
                    </el-option>
                  </el-select>
                  <el-cascader
                    v-else-if="item.field_id == 'region_id'"
                    v-model="item.placeholder"
                    class="filter-item"
                    placeholder="请选择工作地点"
                    clearable
                    :props="{
                      lazy: true,
                      lazyLoad: lazyLoad,
                      label: 'region_name',
                      value: 'region_id',
                      key: 'region_id',
                    }"
                    @change="inputChange(item, 'region_id')"
                  ></el-cascader>
                  <div v-if="item.field_id == 'id_card'" style="display: flex">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                      "
                    >
                      <upload
                        action="/admin/MemberApply/upload"
                        accept="image/*"
                        :data="{ field: 'id_card_photo' }"
                        :fileList="item.id_card_photo"
                        :plain="false"
                        @change="upChange($event, 'id_card_photo')"
                        :sefelfs="sefelfs"
                        @remove="remove('id_card_photo')"
                        @PictureCard="
                          PictureCard(
                            { ...item, field_id: 'id_card_photo' },
                            $event
                          )
                        "
                        :ref="'imgid_card_photo'"
                        :limit="1"
                        @PictureEditBack="
                          PictureEditBack(
                            { ...item, field_id: 'id_card_photo' },
                            $event
                          )
                        "
                      />
                      <span
                        style="color: #f00; display: block; margin-top: 12px"
                      >
                        身份证人像面
                      </span>
                      <span
                        style="
                          cursor: pointer;
                          color: blue;
                          display: block;
                          margin-top: 12px;
                        "
                        v-if="item.others && item.others.defImg"
                        ><span @click="openDefimg(item.others.defImg[0])"
                          >查看示例图片</span
                        ></span
                      >
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                      "
                    >
                      <upload
                        action="/admin/MemberApply/upload"
                        accept="image/*"
                        :data="{ field: 'id_card_emblem' }"
                        :fileList="item.id_card_emblem"
                        :plain="false"
                        @change="upChange($event, 'id_card_emblem')"
                        :sefelfs="sefelfs"
                        @remove="remove('id_card_emblem')"
                        @PictureCard="
                          PictureCard(
                            { ...item, field_id: 'id_card_emblem' },
                            $event
                          )
                        "
                        :ref="'img' + 'id_card_emblem'"
                        :limit="1"
                        @PictureEditBack="
                          PictureEditBack(
                            { ...item, field_id: 'id_card_emblem' },
                            $event
                          )
                        "
                      />
                      <span
                        style="color: #f00; display: block; margin-top: 12px"
                      >
                        身份证国徽面
                      </span>
                      <span
                        style="
                          margin-top: 12px;
                          cursor: pointer;
                          color: blue;
                          display: block;
                        "
                        v-if="item.others && item.others.defImg"
                        ><span @click="openDefimg(item.others.defImg[0])"
                          >查看示例图片</span
                        ></span
                      >
                    </div>
                  </div>
                  <div
                    v-else-if="
                      item.field_type == 'img' && item.field_id != 'id_card'
                    "
                    style="display: flex; align-items: center"
                  >
                    <upload
                      action="/admin/MemberApply/upload"
                      accept="image/*"
                      :data="{ field: item.field_id }"
                      :fileList="item.fileList"
                      :plain="false"
                      @change="upChange($event, item.field_id)"
                      :sefelfs="sefelfs"
                      @remove="remove(item.field_id)"
                      @PictureCard="PictureCard(item, $event)"
                      :ref="'img' + item.field_id"
                      :limit="item.field_id == 'last_cert' ? 2 : 1"
                      :PictureEditBackIf="
                        setting.backgroundPhoto &&
                        ['是', '高级'].includes(setting.backgroundPhoto) &&
                        item.field_id == 'photo'
                      "
                      @PictureEditBack="PictureEditBack(item, $event)"
                    />
                    <span
                      style="
                        margin-left: 10px;
                        cursor: pointer;
                        color: blue;
                        display: block;
                      "
                      v-if="item.others && item.others.defImg"
                      ><span @click="openDefimg(item.others.defImg[0])"
                        >查看示例图片</span
                      ></span
                    >
                    <el-button
                      type="text"
                      v-if="item.others && item.others.appendix"
                      @click="downFuled(item.others.appendix)"
                      style="color: #166aff"
                      >附件下载</el-button
                    >
                  </div>
                  <el-date-picker
                    v-else-if="item.field_type == 'datetime'"
                    v-model="item.placeholder"
                    type="date"
                    value-format="yyyy-MM-dd"
                    @change="inputChange(item)"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <!-- <div v-else-if="item.field_type == 'json'" v-show="item.isshow">
                    <el-form-item :label="it.label" v-for="(it, index) in JSON.parse(item.options)" :key="index" :required="Boolean(item.selected)">
                      <el-input v-model="JsonListFrom[it.label]" @change="inputChange(item, 'json')" v-if="it.field_type == 'input'"></el-input>
                      <el-date-picker
                        @change="inputChange(item, 'json')"
                        v-if="it.field_type == 'datetime'"
                        v-model="JsonListFrom[it.label]"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div> -->
                  <div v-else-if="item.field_type == 'autowrite'">
                    <div>
                      <el-button
                        type="primary"
                        @click="
                          writeName(
                            item,
                            'DomImg' +
                              (item.field_id == 'edu_photo'
                                ? 'xlcn'
                                : item.field_id)
                          )
                        "
                        v-if="!formLabelAlign[item.field_id]"
                        >签名</el-button
                      >
                      <img
                        v-else
                        :src="formLabelAlign[item.field_id]"
                        alt=""
                        style="width: 120px; height: 60px; cursor: pointer"
                        @click="
                          writeName(
                            item,
                            'DomImg' +
                              (item.field_id == 'edu_photo'
                                ? 'xlcn'
                                : item.field_id)
                          )
                        "
                      />
                      <span
                        style="margin-left: 50px; cursor: pointer; color: red"
                        @click="openBookalert(item, item.label)"
                        >阅读{{ item.label }}</span
                      >
                    </div>
                  </div>
                  <div v-else-if="item.field_type == 'sign'">
                    <div>
                      <el-button
                        type="primary"
                        @click="writeName(item, null)"
                        v-if="!formLabelAlign[item.field_id]"
                        >签名</el-button
                      >
                      <img
                        v-else
                        :src="formLabelAlign[item.field_id]"
                        alt=""
                        style="width: 120px; height: 60px; cursor: pointer"
                        @click="writeName(item, null)"
                      />
                      <span
                        style="margin-left: 50px; cursor: pointer; color: red"
                        @click="openBookalert(item, item.label)"
                        >阅读{{ item.label }}</span
                      >
                    </div>
                  </div>
                  <template v-else-if="item.field_type == 'jsonTree'">
                    <el-form-item
                      style="margin-left: -120px !important"
                      :label="
                        it.field_type != 'json' && it.field_type != 'jsonTree'
                          ? it.label
                          : ''
                      "
                      :required="
                        item.field_type != 'json' &&
                        it.field_type != 'jsonTree' &&
                        Boolean(item.selected)
                      "
                      v-for="(it, index) in JSON.parse(item.options)"
                      :key="index + 15854"
                    >
                      <el-input
                        v-model="it.placeholder"
                        v-if="it.field_type == 'input'"
                        @change="inputChange(it)"
                      ></el-input>
                      <el-select
                        style="width: 100%"
                        @change="inputChange(it, '', $event)"
                        v-model="formLabelAlign[it.field_id]"
                        placeholder="请选择"
                        v-else-if="it.field_type == 'select' && it.options"
                      >
                        <el-option
                          v-for="(el, index) in it.options"
                          :key="index"
                          :label="el.e ? el.e : el"
                          :value="el"
                        >
                        </el-option>
                      </el-select>
                      <div v-else-if="it.field_type == 'datetimeRange'">
                        <el-date-picker
                          v-model="it.placeholder[0]"
                          type="date"
                          value-format="yyyy-MM-dd"
                          @change="inputChange(it, 'time')"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                        <span>至</span>
                        <el-input
                          v-model="it.placeholder[1]"
                          v-if="it.placeholder[1] == '至今'"
                          readonly
                          @click.native="clickInput(it)"
                        ></el-input>
                        <el-date-picker
                          v-else
                          v-model="it.placeholder[1]"
                          type="date"
                          value-format="yyyy-MM-dd"
                          @change="inputChange(it, 'time')"
                          placeholder="选择日期"
                          ref="updataDatePicker"
                          @blur="
                            () => {
                              !it.placeholder[1]
                                ? (it.placeholder[1] = '至今')
                                : it.placeholder[1];
                              $forceUpdate();
                            }
                          "
                        >
                        </el-date-picker>
                      </div>
                      <div
                        v-else-if="it.field_type == 'img'"
                        style="display: flex; align-items: center"
                      >
                        <upload
                          action="/admin/MemberApply/upload"
                          accept="image/*"
                          :data="{ field: it.field_id }"
                          :fileList="it.fileList"
                          :plain="false"
                          @change="upChange($event, it.field_id)"
                          :sefelfs="sefelfs"
                          @remove="remove(it.field_id)"
                          @PictureCard="PictureCard(it, $event)"
                          :ref="'img' + it.field_id"
                          :limit="it.field_id == 'last_cert' ? 2 : 1"
                          :PictureEditBackIf="
                            setting.backgroundPhoto &&
                            setting.backgroundPhoto == '是' &&
                            it.field_id == 'photo'
                          "
                          @PictureEditBack="PictureEditBack(it, $event)"
                        />
                        <span
                          style="
                            margin-left: 10px;
                            cursor: pointer;
                            color: blue;
                            display: block;
                          "
                          v-if="it.defImg"
                          ><span @click="openDefimg(it.defImg)"
                            >查看示例图片</span
                          ></span
                        >
                      </div>
                      <div v-if="it.field_type == 'sign'">
                        <el-button
                          type="primary"
                          @click="writeName(it, null)"
                          v-if="!formLabelAlign[it.field_id]"
                          >签名</el-button
                        >
                        <img
                          v-else
                          :src="formLabelAlign[it.field_id]"
                          alt=""
                          style="width: 120px; height: 60px; cursor: pointer"
                          @click="writeName(it, null)"
                        />
                        <span
                          style="margin-left: 50px; cursor: pointer; color: red"
                          @click="openBookalert(it, it.label)"
                          >阅读{{ it.label }}</span
                        >
                      </div>
                    </el-form-item>
                  </template>
                  <template v-if="item.field_type == 'download'">
                    <el-button
                      class="button"
                      type="primary"
                      @click="downloadImg2(item.others)"
                      >下载</el-button
                    >
                  </template>
                </el-form-item>
                <el-form-item
                  label="燃气主管部门"
                  required
                  v-if="
                    http.indexOf('bosheng') != -1 &&
                    formLabelAlign.gz == '燃气从业人员培训'
                  "
                >
                  <el-cascader
                    v-model="deptitle"
                    :options="depList"
                    class="filter-item"
                    placeholder="请选择部门"
                    clearable
                    :props="{
                      label: 'title',
                      value: 'id',
                    }"
                    @change="depchange"
                  ></el-cascader>
                </el-form-item>
                <el-form-item
                  label="验证码"
                  v-if="
                    platform('hzdpx') ||
                    platform('xtaq') ||
                    (platform('zcaq') && formLabelAlign.gz == '大培训')
                  "
                >
                  <div style="display: flex; width: 100%">
                    <el-input style="flex: 1" v-model="codeChk"> </el-input>
                    <div
                      style="
                        height: 40px;
                        display: flex;
                        align-items: center;
                        min-width: 70px;
                        margin-left: 5px;
                      "
                    >
                      <el-button
                        type="primary"
                        style="height: 100%"
                        @click="hoveCode"
                        v-if="hascodeYes"
                        >获取验证码</el-button
                      >
                      <div
                        v-else
                        style="
                          height: 100%;
                          width: 70px;
                          border: 1px solid #eee;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          color: #000;
                        "
                      >
                        {{ codeTime }}s
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <div v-if="objinvoice[formLabelAlign.gz] == '开启'">
                  <el-form-item label="发票税号">
                    <el-input v-model="shuihao"></el-input>
                  </el-form-item>
                  <el-form-item label="发票户头">
                    <el-input v-model="hutou"></el-input>
                  </el-form-item>
                  <el-form-item label="发票截图">
                    <upload
                      action="/admin/MemberApply/upload"
                      accept="image/*"
                      :data="{ field: 'image' }"
                      :fileList="FpfileList.fileList"
                      :plain="false"
                      @change="upChange"
                      @remove="remove('image')"
                      @PictureCard="PictureCard(FpfileList, $event)"
                      :ref="'imgimage'"
                    />
                  </el-form-item>
                </div>
                <!-- <el-form-item label="注意事项" v-if="(platformAnhui() || platform('qiye')) && formLabelAlign.gz == '特种作业'">
                  <el-button type="primary" @click="writeName('注意事项', null)" v-if="!autographPath4">签名</el-button>
                  <img v-else :src="autographPath4" alt="" style="width: 120px; height: 60px; cursor: pointer" @click="writeName('注意事项', null)" />
                  <span style="margin-left: 50px; cursor: pointer; color: red" @click="openBookshixiang">阅读注意事项</span>
                </el-form-item>
                <el-form-item label="诚信声明" v-if="(platform('sjhg'))">
                  <el-button type="primary" @click="writeName('cxsm', null)" v-if="!autographPath5">签名</el-button>
                  <img v-else :src="autographPath5" alt="" style="width: 120px; height: 60px; cursor: pointer" @click="writeName('cxsm', null)" />
                  <span style="margin-left: 50px; cursor: pointer; color: red" @click="openBookalert('cxsm','诚信声明')">阅读诚信声明</span>
                </el-form-item>
                <el-form-item label="承诺事项" v-if="(platform('guangtai')&&formLabelAlign.gz == '特种作业')">
                  <el-button type="primary" @click="writeName('cnsx', null)" v-if="!autographPath6">签名</el-button>
                  <img v-else :src="autographPath6" alt="" style="width: 120px; height: 60px; cursor: pointer" @click="writeName('cnsx', null)" />
                  <span style="margin-left: 50px; cursor: pointer; color: red" @click="openBookalert('cnsx','承诺事项')">阅读承诺事项</span>
                </el-form-item>
                <el-form-item label="知情同意书" v-if="(platform('kaiqi')||platform('mingda'))&&formLabelAlign.gz == '特种作业'">
                  <el-button type="primary" @click="writeName('zqtys', null)" v-if="!autographPath7">签名</el-button>
                  <img v-else :src="autographPath7" alt="" style="width: 120px; height: 60px; cursor: pointer" @click="writeName('zqtys', null)" />
                  <span style="margin-left: 50px; cursor: pointer; color: red" @click="openBookalert('zqtys','知情同意书')">阅读知情同意书</span>
                </el-form-item>
                <el-form-item label="承诺项" v-if="init.district.includes('云南')&&formLabelAlign.gz == '特种作业'">
                  <el-button type="primary" @click="writeName('cnx', null)" v-if="!autographPath8">签名</el-button>
                  <img v-else :src="autographPath8" alt="" style="width: 120px; height: 60px; cursor: pointer" @click="writeName('cnx', null)" />
                  <span style="margin-left: 50px; cursor: pointer; color: red" @click="openBookalert('cnx','承诺项')">阅读承诺项</span>
                </el-form-item> -->
                <!-- <el-form-item label="报名表下载" v-if="(platformAnhui() || platform('qiye')) && formLabelAlign.gz == '特种作业'">
                  <el-button type="primary" @click="downloadImg2('报名表下载')" style="height: 100%">下载</el-button>
                </el-form-item> -->
                <!-- <el-form-item label="任命文书下载" v-if="(platformAnhui() || platform('qiye')) && (formLabelAlign.gz == '一般工贸' || formLabelAlign.gz == '安全管理')">
                  <el-button type="primary" @click="downloadImg2('任命文书下载')" style="height: 100%">下载</el-button>
                </el-form-item> -->
                <!-- <el-form-item label="登记表下载" v-if="(platform('xinhua')) && (formLabelAlign.gz == '安全管理')">
                  <el-button type="primary" @click="downloadImg2('登记表下载')" style="height: 100%">下载</el-button>
                </el-form-item> -->
              </div>
              <div v-else>
                <!-- 太化 -->
                <Taihua
                  ref="taihua"
                  :gz="formLabelAlign.gz"
                  @formlist="commitA"
                ></Taihua>
              </div>
            </el-form>
            <div style="margin-top: 10px">
              <div class="box_form_title">
                <el-button
                  type="primary"
                  @click="commit"
                  v-if="
                    http.indexOf('taihua') == -1 ||
                    (http.indexOf('taihua') != -1 &&
                      formLabelAlign.gz != '学历提升')
                  "
                  >{{
                    platform("lyky") ||
                    platform("xtaq") ||
                    (platform("zcaq") && formLabelAlign.gz == "大培训")
                      ? "提交并登录"
                      : "提交"
                  }}</el-button
                >
                <el-button type="primary" @click="commitA" v-else
                  >提交</el-button
                >
                <!-- <el-button type="danger" @click="()=>{
                                    this.$refs.jf.open()
                                }">我已报名,去缴费</el-button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <simpleCrop
      :crop-params="cropParams"
      @crop="crop"
      v-if="isShowImgCard"
      @close="closeCallback"
    >
    </simpleCrop>
    <el-dialog title="签名" :visible.sync="dialogShow" width="30%">
      <div style="width: 100%; display: flex; justify-content: center">
        <autograph ref="autograph"> </autograph>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            () => {
              this.formLabelAlign[this.fileNameWirth] =
                this.$refs.autograph.clear();
              this.conse();
            }
          "
          >清 空</el-button
        >
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-input
        v-model="str"
        type="textarea"
        placeholder="请输入内容"
        :autosize="{ minRows: 2 }"
        resize="none"
        :readonly="true"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div id="DomImgfwxy" class="DomImg">
      <div class="A4page">
        <img
          style="width: 100%; position: relative"
          src="https://lyky.taijieyun.com/storage/userimage/lyky/20230523/35e1f152e87a67bac254642ef3eebd2c.png"
          alt=""
          srcset=""
        />
        <img
          style="height: 70px; right: 127px; top: 99px; position: absolute"
          :src="autographPath"
          alt=""
        />
      </div>
    </div>
    <div
      id="DomImgjkcns"
      class="DomImg"
      v-if="
        (!platform('htaq') ||
          (platform('htaq') && formLabelAlign.gz != '特种作业')) &&
        (!platform('sanyuan') ||
          (platform('sanyuan') && formLabelAlign.gz != '特种作业'))
      "
    >
      <div class="A4page">
        <h1>个人健康承诺</h1>
        <div style="margin-top: 80px">
          <p style="text-indent: 50px; font-family: '宋体'">
            本人姓名
            <u>{{ formLabelAlign.nickname }}</u
            >，身份证号码<u>{{ formLabelAlign.username }} </u>，现申请<u>{{
              subjectTitle
            }}</u
            >（作业类别）特种作业操作证。本人身体健康，无妨碍从事相应特种作业的器质性心脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、痴呆症以及其他疾病和生理缺陷。{{
              init.district.includes("云南") ? "本人承诺：" : ""
            }}本人对以上信息的真实性负责，如有隐瞒，相关责任全部由本人承担。
          </p>
          <p
            style="text-indent: 50px; font-family: '宋体'"
            v-if="init.district.includes('云南')"
          >
            特此承诺
          </p>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
              margin-top: 150px;
            "
          >
            <span style="font-size: 16px">承诺人（签字）：</span>
            <img :src="autographPath" style="height: 30px" alt="" />
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
            "
            v-if="init.district.includes('云南')"
          >
            <p style="font-size: 30px; min-width: 300px">
              电话：{{ formLabelAlign.phone }}
            </p>
          </div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getFullYear() }}年</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getMonth() + 1 }}月</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getDate() }}日</span
            >
          </div>
        </div>
      </div>
    </div>
    <div
      id="DomImgjkcns"
      class="DomImg"
      v-if="platform('htaq') && formLabelAlign.gz == '特种作业'"
    >
      <div class="A4page">
        <h1>特种作业人员健康承诺书</h1>
        <div style="margin-top: 80px">
          <p style="text-indent: 50px; font-family: '宋体'">
            本人姓名
            <u>{{ formLabelAlign.nickname }}</u
            >，身份证号码<u>{{ formLabelAlign.username }} </u>，现申请<u>{{
              subjectTitle
            }}</u
            >特种作业操作证。
          </p>
          <p style="text-indent: 50px; font-family: '宋体'">郑重承诺</p>
          <p style="text-indent: 50px; font-family: '宋体'">
            一、本人身体健康状况良好，并无妨碍从事相应特种作业的器质性心
            脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、痴呆
            症以及其他疾病和生理缺陷，能够适应所申请作业项目工作要求。
          </p>
          <p style="text-indent: 50px; font-family: '宋体'">
            二、本《承诺书》同意向社会公开。若违背承诺约定或者作出虚假承
            诺，愿意接受相应的规定处罚，承担违约责任，并依法承担相应的法律责
            任。违诺行为作为失信信息，归集至公共信用信息平台并公示。
          </p>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
              margin-top: 50px;
            "
          >
            <span style="font-size: 16px">承诺人（签字）：</span>
            <img :src="autographPath" style="height: 70px" alt="" />
          </div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <span style="font-size: 16px">承诺日期：</span>
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getFullYear() }}年</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getMonth() + 1 }}月</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getDate() }}日</span
            >
          </div>
        </div>
      </div>
    </div>
    <div
      id="DomImgjkcns"
      class="DomImg"
      v-if="platform('sanyuan') && formLabelAlign.gz == '特种作业'"
    >
      <div class="A4page">
        <h1>特种作业人员健康承诺书</h1>
        <div style="margin-top: 80px">
          <p style="text-indent: 50px; font-family: '宋体'">
            本人申请<u>{{ subjectTitle }}</u
            >操作考试，身体条件符合特种作
            业人员安全技术培训大纲和考核标准规定的基本条件，矫正视力<u>5.0</u>,
            无妨碍从事<u>{{ subjectTitle }}</u
            >特种作业的器质性心
            脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、
            痴呆症、色盲、色弱以及其他对从事<u>{{ subjectTitle }}</u
            >有妨碍 或有安全隐患的疾病和生理缺陷。本人对个人健康承诺的真实性负
            责。
          </p>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
              margin-top: 50px;
            "
          >
            <span style="font-size: 16px">承诺人：</span>
            <img :src="autographPath" style="height: 70px" alt="" />
          </div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <span style="font-size: 16px">时间：</span>
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getFullYear() }}年</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getMonth() + 1 }}月</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getDate() }}日</span
            >
          </div>
        </div>
      </div>
    </div>
    <div id="DomImgxlcn" class="DomImg">
      <div class="A4page">
        <h1>个人学历承诺</h1>
        <div style="margin-top: 80px">
          <p style="text-indent: 50px; font-family: '宋体'">
            本人姓名<u>{{ formLabelAlign.nickname }}</u
            >，身份证号码<u>{{ formLabelAlign.username }}</u
            >，现申请<u>{{ subjectTitle }}</u
            >（作业类别）特种作业操作证。本人身体健康，无妨碍从事相应特种作业的器质性心脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、痴呆症以及其他疾病和生理缺陷。本人对以上信息的真实性负责，如有隐瞒，相关责任全部由本人承担。
          </p>

          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
              margin-top: 150px;
            "
          >
            <span style="font-size: 30px">承诺人（签字）：</span>
            <img :src="autographPath" style="height: 70px" alt="" />
          </div>

          <div style="width: 100%; display: flex; justify-content: flex-end">
            <span style="font-size: 30px; padding: 0 30px"
              >{{ new Date().getFullYear() }}年</span
            >
            <span style="font-size: 30px; padding: 0 30px"
              >{{ new Date().getMonth() + 1 }}月</span
            >
            <span style="font-size: 30px; padding: 0 30px"
              >{{ new Date().getDate() }}日</span
            >
          </div>
        </div>
      </div>
    </div>
    <div id="DomImgzjbl" class="DomImg">
      <div class="A4page">
        <h1>证件办理费用协议</h1>
        <div style="margin-top: 80px">
          <div>
            <p>甲方:{{ setting.gsName }}</p>
            <p>乙方:{{ formLabelAlign.nickname }}</p>
          </div>
          <div>
            <p>
              一、甲方依据相关规定收取乙方培训、考试、办理及发放证件等费用，并依法对乙方提供相关服务。
            </p>
            <p>
              二、乙方必须按甲方规定时间进行培训、考试及取证，因乙方个人原因及行为不能按时参加培训、考试及无法取证者，甲方不予退费。
            </p>
            <p>三、从报名开始，六个月之内必须考完，否则视为自动放弃。</p>
            <p>四、代办人员需将本协议告知学员本人。</p>
            <p>本人已阅读并同意上述协议内容。</p>
          </div>
          <div
            style="height: 300px; width: 460px"
            v-if="formLabelAlign.id_card_photo"
          >
            <img
              style="width: 100%; height: 100%"
              crossOrigin="Anonymous"
              :src="formLabelAlign.id_card_photo + '?' + new Date().getTime()"
              alt=""
            />
          </div>
          <!--  v-if="formLabelAlign.id_card_emblem" -->
          <div
            style="height: 300px; width: 460px"
            v-if="formLabelAlign.id_card_emblem"
          >
            <img
              style="width: 100%; height: 100%"
              crossOrigin="Anonymous"
              :src="formLabelAlign.id_card_emblem + '?' + new Date().getTime()"
              alt=""
            />
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 30px;
              margin-top: 100px;
            "
          >
            <span style="font-size: 16px">承诺人（签字）：</span>
            <img :src="autographPath" style="height: 30px" alt="" />
          </div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getFullYear() }}年</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getMonth() + 1 }}月</span
            >
            <span style="font-size: 16px; padding: 0 16px"
              >{{ new Date().getDate() }}日</span
            >
          </div>
        </div>
      </div>
    </div>
    <jf ref="jf"></jf>
    <el-dialog
      title="编辑背景色"
      :visible.sync="showProBack"
      width="30%"
      v-loading="showProBackLoading"
    >
      <div style="display: flex; flex-direction: column; align-items: center">
        <img :src="backPhoto" alt="" style="height: 350px; width: 250px" />
        <div style="display: flex">
          <p
            style="
              margin: 10px 15px;
              background-color: #fff;
              height: 40px;
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              box-shadow: 0px 2px 6px 0 #aaa;
              cursor: pointer;
            "
            @click="checkBackGround('0')"
          ></p>
          <p
            style="
              margin: 10px 15px;
              background-color: blue;
              height: 40px;
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              box-shadow: 0px 2px 6px 0 #aaa;
              cursor: pointer;
            "
            @click="checkBackGround('1')"
          ></p>
          <!-- <p
            style="
              margin: 10px 15px;
              background-color: #f00;
              height: 40px;
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              box-shadow: 0px 2px 6px 0 #aaa;
              cursor: pointer;
            "
            @click="checkBackGround('2')"
          ></p> -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitEditPhtot">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  applyList,
  applyAdd,
  subjectList,
  regionList,
  H5Pay,
  H5PayList,
  maPay,
  qrcode,
  sendcode,
  axios,
  photoMake,
  Department,
} from "@/api/apply.js";
import simpleCrop from "simple-crop/index.vue";
import "simple-crop/template-1.css";
import { mapGetters } from "vuex";
import { dataURLtoFile } from "@/utils/64batatoFile";
import autograph from "@/components/autograph";
import { upFile, upFileqm, ImgUrltoFile } from "@/utils/upFiel.js";
import { download, downloadAll } from "@/api/download.js";
import jf from "./jf.vue";
import Taihua from "./components/taihua.vue";
import {
  setapplyid,
  getapplyid,
  delapplyid,
  setopenId,
  getopenId,
  delopenId,
  setstartInfo,
  delstartInfo,
  getstartInfo,
} from "@/utils/cookie.js";
import { Image } from "vant";
export default {
  computed: {
    ...mapGetters(["init", "http"]),
  },
  components: {
    simpleCrop,
    autograph,
    jf,
    Taihua,
  },
  data() {
    return {
      depList: [],
      deptitle: "",
      fromList: [],
      formLabelAlign: {
        gz: "",

        extra: { address: "", CNPtype: "", 企业性质: "", 注意事项: "" },
      },
      codeChk: "",
      GZList: [],
      qyname: "",
      qylogo: "",
      loading: false,
      fileList: [],
      subjectListTree: [],
      subjectlist: [],
      companytype: "",
      Arrpass: [], //
      titleA: "初培",
      itemA: {}, //当前科目信息
      JsonListFrom: {},
      cropParams: {
        title: "编辑图片(可以拖动边框改变截取图片大小)", //标题
        src: "", // 裁剪图片地址
        size: {
          // 裁剪尺寸
          width: 390,
          height: 567,
        },
        rotateSlider: true, //是否开启旋转刻度盘
        cropSizePercent: 0.65, //裁剪框显示比例
        borderWidth: 1, //裁剪框边框宽度
        funcBtns: ["close", "crop", "around", "reset"], //功能按钮配置
        borderColor: "#fff", //裁剪框边框颜色
        coverColor: "rgba(0,0,0,.5)", //裁剪框遮罩颜色
        startAngle: -360, //旋转刻度盘开始角度
        endAngle: 360, //旋转刻度盘结束角度
      },
      showProBack: false, //图片背景色修改弹框
      showProBackLoading: false, //图片背景色修改弹框
      backPhoto: "", //修改之后的url
      backPhotoFile: "", //修改之后的file类型文件
      isShowImgCard: false,
      dialogShow: false,
      autographPath: "", //签名图片地址 清空或无写入为false
      autographPath1: "", //签名图片地址 清空或无写入为false
      autographPath2: "", //签名图片地址 清空或无写入为false
      autographPath3: "", //签名图片地址 清空或无写入为false
      autographPath4: "", //签名图片地址 清空或无写入为false
      autographPath5: "", //签名图片地址 清空或无写入为false
      autographPath6: "", //签名图片地址 清空或无写入为false
      autographPath7: "", //签名图片地址 清空或无写入为false
      autographPath8: "", //签名图片地址 清空或无写入为false
      dialogVisible: false,
      str: "",
      setting: {},
      Domsrc: "", //签名图片
      DomImgShow: false, //健康承诺书
      subjectTitle: "",
      subjectTitleList: [],
      objinvoice: {}, //发票信息
      hutou: "", //发票户头
      shuihao: "", //发票税号
      FpfileList: { fileList: [], field_id: "image" }, //发票图片表
      JkfileList: { fileList: [], field_id: "jkcns" }, //发票图片表
      showBox: false, //特种设备展示模块
      fileNameWirth: "",
      DOMID: "",
      hascodeYes: true,
      codeTime: 60,
      timeObj: Object,
      typeList: [
        "一般工贸",
        "普货运输",
        "危货运输",
        "汽车维修",
        "驾驶培训",
        "危化品",
      ],
      addressList: [
        "禹会",
        "蚌山",
        "龙子湖",
        "经开",
        "高新",
        "淮上",
        "怀远",
        "固镇",
        "五河",
      ],
      sefelfs: "1", //文件自动上传
      arrlist: [],
      canvasdata: "",
    };
  },
  watch: {
    // 'cropParams.size':{
    //   deep:true,
    //   handler:function (val){
    //     console.log(val,'7777');
    //     this.closeCallback()
    //     setTimeout(()=>{
    //       this.isShowImgCard=true
    //     },1000)
    //   }
    // }
  },
  created() {
    // this.init()
    if (this.$route.query.adminid) {
      this.admin_user_id = this.$route.query.adminid;
      this.depid = this.$route.query.depid;
      this.dep = this.$route.query.dep;
      setstartInfo(
        JSON.stringify({
          admin_user_id: this.$route.query.adminid,
          depid: this.$route.query.depid,
          dep: this.$route.query.dep,
        })
      );
    } else {
      this.admin_user_id = "";
      this.depid = "";
      this.dep = "";
      if (this.platformAnhui()) {
        setstartInfo(
          JSON.stringify({
            admin_user_id: "1106",
            depid: 1,
            dep: 1,
          })
        );
        this.admin_user_id = "1106";
        this.depid = "1";
        this.dep = "1";
      } else {
        delstartInfo();
      }
    }
    this.GZList = this.init.selected_gz.split(",");
    if (this.platform("xtaq")) {
      //大类里面只留下大培训
      this.GZList = ["大培训"];
    }
    if (this.platform("yali")) {
      this.GZList.map((item, index) => {
        if (item == "一般工贸") {
          this.GZList[index] = "一般行业";
        }
        if (item == "安全管理") {
          this.GZList[index] = "危化品";
        }
      });
    }
    if (this.platform("dkaq")) {
      this.GZList.map((item, index) => {
        if (item == "安全管理") {
          this.GZList[index] = "高危安管";
        }
      });
    }
    this.setting = JSON.parse(this.init.setting);

    if (this.$route.query.name) {
      this.formLabelAlign.gz = this.$route.query.name;
    } else {
      this.formLabelAlign.gz = this.GZList[0];
    }
    this.qyname = this.init.alias;
    this.qylogo = this.init.qylogo;
    this.applyListData(this.formLabelAlign.gz);

    this.subject(this.formLabelAlign.gz);
    if (this.setting.invoice) {
      this.objinvoice = JSON.parse(this.setting.invoice);
    }
    if (this.setting.bmSerm) {
      this.str = JSON.parse(JSON.stringify(this.setting.bmSerm));
      this.dialogVisible = true;
    } else {
      this.str = "";
    }
    if (this.formLabelAlign.gz == "特种设备") {
      this.showBox = true;
    } else {
      this.showBox = false;
    }
    if (
      this.http.indexOf("bosheng") != -1 &&
      this.formLabelAlign.gz == "燃气从业人员培训"
    ) {
      Department().then((res) => {
        this.depList = res.data;
      });
    }
  },
  methods: {
    conse() {
      this.formLabelAlign[this.fileNameWirth] = "";
      this.formLabelAlign.signature =
        this.formLabelAlign.jkcns ||
        this.formLabelAlign.zjbl ||
        this.formLabelAlign.edu_photo ||
        "";
      this.autographPath = this.formLabelAlign.signature;
      // if(this.fileNameWirth=='edu_photo'){
      //     this.formLabelAlign.edu_photo=''
      // }else if(this.fileNameWirth=='jkcns'){
      //     this.formLabelAlign.jkcns=''
      // }else if(this.fileNameWirth=='zjbl'){
      //     this.formLabelAlign.zjbl=''
      // }
    },
    //获取验证码
    hoveCode() {
      if (!this.formLabelAlign.phone) {
        return this.$message.error("手机号不能为空");
      }
      this.codeTime = 60;
      this.hascodeYes = false;
      clearInterval(this.timeObj);
      sendcode({
        mobile: this.formLabelAlign.phone,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("验证码发送成功");
          this.timeObj = setInterval(() => {
            if (this.codeTime <= 0) {
              this.hascodeYes = true;
              clearInterval(this.timeObj);
            }
            this.codeTime--;
          }, 1000);
        }
      });
    },
    applyListData(gz) {
      this.loading = true;
      applyList({ gz, usage: "apply" }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.fromList = res.data
            .filter((item) => item.label != "工种")
            .filter((item) => item.label != "初复审");

          this.fromList.map((item) => {
            if (
              this.formLabelAlign.gz == "一般工贸" &&
              item.label == "职称" &&
              this.platform("saite")
            ) {
              item.options =
                '[{"e":"高级"},{"e":"中级"},{"e":"初级"},{"e":"无"}]';
            }
            if (this.platformAnhui()) {
              if (item.field_id == "photo") {
                item.label = "大头照";
              }
            }
          });

          JSON.parse(JSON.stringify(this.fromList))
            .filter((item) => item.field_id == "json")
            .map((item) => {
              JSON.parse(item.options).map((it) => {
                this.JsonListFrom[it.label];
              });
            });

          res.data.map((item) => {
            item.isshow = true;
            if (item.field_id != "gz" && item.field_id != "extra") {
              this.formLabelAlign[item.field_id] = item.placeholder;
            }
            if (item.field_type == "datetimeRange") {
              item.placeholder = ["", "至今"];
              this.formLabelAlign[item.field_id] = item.placeholder.join();
            }
            if (item.field_id == "extra") {
              Object.assign(this.formLabelAlign, { extra: {} });
              JSON.parse(item.options).map((el) => {
                Object.assign(this.formLabelAlign.extra, {
                  [el.field_id]: el.placeholder,
                });
              });
            }
            if (gz == "特种作业") {
              if (item.label == "现持证书信息") {
                item.isshow = false;
              }
            }
            if (gz == "一般工贸") {
              if (item.label == "安全合格证证号" || item.label == "截止日期") {
                item.isshow = false;
              }
            }
            if (gz == "职业卫生") {
              if (this.platform("ataq")) {
                if (item.field_id == "training_record") {
                  item.isshow = false;
                }
              }
            }
            // if(gz=='特种作业'&&item.label=='安全生产管理人员安全合格证证号'){
            //     item.isshow = false
            // }
            // if(gz=='特种作业'&&item.label=='安全生产管理人员安全合格证证号'){
            //     item.isshow = false
            // }
          });
          this.Arrpass = res.data;
        }
      });
    },
    //切换工种
    gzChange(value) {
      this.titleA = "初培";
      let str = value;
      this.fromList = [];
      this.formLabelAlign = { gz: value };
      if (this.platform("yali")) {
        if (str == "一般行业") {
          str = "一般工贸";
        }
        if (str == "危化品") {
          str = "安全管理";
        }
      }
      if (this.platform("dkaq")) {
        if (str == "高危安管") {
          str = "安全管理";
        }
      }
      if (this.http.indexOf("taihua") != -1) {
        if (value != "学历提升") {
          this.applyListData(str);
        }
      } else {
        this.applyListData(str);
      }
      this.subject(str);
      if (str == "特种设备") {
        this.showBox = true;
      } else {
        this.showBox = false;
      }
    },
    //init
    // async init(){
    //    await applyInit().then( res=>{
    //         if(res.code==200){
    //             console.log(res)
    //             this.GZList=res.data.selected_gz.split(',')
    //             this.qyname=res.data.alias
    //             this.formLabelAlign.gz=this.GZList[0]
    //             this.applyListData(this.GZList[0])
    //             this.subject(this.GZList[0])
    //         }
    //     })
    // },
    //科目
    subject(gz) {
      subjectList(gz).then((res) => {
        this.subjectListTree = res;
        if (this.platform("xtaq") || this.platform("zcaq")) {
          this.subjectListTree = res.filter((item) => {
            return item.id == 794;
          });
        }
        if (this.platform("hshd") && (gz == "特种作业" || gz == "安全管理")) {
          var lop = function (list = []) {
            for (let index = 0; index < list.length; index++) {
              const item = list[index];
              if (item.title == "初培") {
                // item.disabled=true
                list.splice(index, 1);
              } else {
                lop(item.children);
              }
            }
          };
          lop(this.subjectListTree);
        }
        // if (this.platform("xinhua") && gz == "安全管理") {
        //   this.subjectListTree = res.filter((item) => {
        //     return (
        //       item.title == "烟花爆竹生产单位" ||
        //       item.title == "烟花爆竹经营单位"
        //     );
        //   });
        // }
      });
    },
    //科目切换
    subChange(value) {
      this.formLabelAlign.subject_id = value[value.length - 1];
      this.formLabelAlign.subject_ids = value.join(",");
      this.subjectTitleList = [];
      this.deep(this.subjectListTree, this.formLabelAlign.subject_id);
      console.log(value);
      this.deep3(this.subjectListTree, value);

      this.deep2(this.subjectListTree, value[0]);

      if (this.subjectlist.length != 0) {
        if (this.titleA == "初培" || this.titleA == "复审") {
          this.formLabelAlign.exam_type = this.titleA;
        } else {
          this.formLabelAlign.exam_type = "初培";
        }
      }
      let gz = this.formLabelAlign.gz;
      this.Arrpass.map((item) => {
        item.isshow = true;
      });
      this.Arrpass.map((item) => {
        if (gz == "特种作业") {
          if (this.platformAnhui()) {
            if (item.field_id == "last_cert") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
            if (item.field_id == "qzsj") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
          } else {
            if (item.label == "现持证书信息") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
            if (item.label == "户口本" || item.label == "毕业证") {
              if (this.titleA.indexOf("复审") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
          }
        }
        if (gz == "一般工贸") {
          if (this.platformAnhui()) {
            if (item.field_id == "last_cert") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
            if (item.field_id == "qzsj") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
          } else {
            if (item.label == "安全合格证证号" || item.label == "截止日期") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
          }
        }
        if (gz == "安全管理" || gz == "高危安管") {
          if (this.platformAnhui()) {
            if (item.field_id == "last_cert") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
            if (item.field_id == "zhicheng") {
              if (this.subjectTitle.indexOf("危险化学品生产单位") != -1) {
                item.isshow = true;
              } else {
                item.isshow = false;
              }
            }
            if (item.field_id == "edu_photo") {
              if (this.subjectTitle.indexOf("危险化学品生产单位") != -1) {
                item.hint =
                  "毕业证和职称证选一个进行上传，须化工专业大专或中级职称以上证书";
              } else {
                item.hint = "毕业证和户口本选一个进行上传";
              }
            }
          }
          if (item.field_id == "qzsj") {
            if (this.titleA.indexOf("初培") != -1) {
              item.isshow = false;
            } else {
              item.isshow = true;
            }
          }
        }
        if (gz == "职业卫生") {
          if (this.platform("ataq")) {
            if (item.field_id == "training_record") {
              if (this.titleA.indexOf("初培") != -1) {
                item.isshow = false;
              } else {
                item.isshow = true;
              }
            }
          }
        }
        if (this.platform("yuhua")) {
          if (item.field_id == "edu_photo") {
            if (this.titleA.indexOf("复审") != -1) {
              item.isshow = false;
            } else {
              item.isshow = true;
            }
          }
        }
      });
      this.$forceUpdate();
    },
    //递归
    deep(subjectListTree = [], id) {
      for (let i = 0; i < subjectListTree.length; i++) {
        let item = subjectListTree[i];

        if (item.id == id) {
          this.titleA = item.title;
          this.itemA = item;
          break;
        } else if (item.children) {
          this.deep(item.children, id);
        }
      }
    },
    //递归2
    deep2(subjectListTree = [], id) {
      for (let i = 0; i < subjectListTree.length; i++) {
        let item = subjectListTree[i];
        if (item.id == id) {
          this.subjectTitle = item.title;
          break;
        } else if (item.children) {
          this.deep2(item.children, id);
        }
      }
    },
    //递归3
    deep3(subjectListTree = [], id) {
      for (let i = 0; i < subjectListTree.length; i++) {
        let item = subjectListTree[i];
        if (id.includes(item.id)) {
          this.subjectTitleList.push(item.title);
          if (item.children) {
            this.deep3(item.children, id);
          } else {
            break;
          }
        } else {
          break;
        }
      }
    },
    depchange(val) {
      this.formLabelAlign["dep"] = val[val.length - 1];
      this.formLabelAlign["depid"] = val[val.length - 1];
    },
    //科目初复审校验
    // subjectitem(value){
    //     switch(this.formLabelAlign.gz){
    //         case '特种作业':
    //             return value=='初培'?true:false;
    //         case '安全管理':
    //             return value=='初培'?true:false;
    //     }
    // },
    //点击输入框
    clickInput(data) {
      console.log(data, "678");
      data.placeholder[1] = null;
      this.$forceUpdate();
      this.$nextTick(() => {
        this.$refs.updataDatePicker[0].$el
          .getElementsByTagName("input")[0]
          .focus();
        // this.$refs.updataDatePicker[0].$children[0].$el.click()
      });
    },
    //input输入框 改变时触发
    inputChange(data, txt, value) {
      this.formLabelAlign[data.field_id] = data.placeholder;
      if (value) {
        if (this.formLabelAlign.extra) {
          this.formLabelAlign.extra[data.field_id] = value;
        }
        this.formLabelAlign[data.field_id] = value;
      }
      // if(txt=="dep"){
      //     this.formLabelAlign[data.field_id] = data.placeholder.join(',')
      // }
      if (txt == "region_id") {
        this.formLabelAlign[data.field_id] = data.placeholder.join(",");
      }
      if (txt == "json") {
        this.formLabelAlign[data.field_id] = JSON.stringify(this.JsonListFrom);
      }
      if (txt == "time") {
        if (data.field_type == "datetimeRange") {
          this.formLabelAlign[data.field_id] = JSON.stringify([
            data.placeholder[0],
            data.placeholder[1] ? data.placeholder[1] : "至今",
          ]);
        } else {
          this.formLabelAlign[data.field_id] = JSON.stringify(data.placeholder);
        }
      }
      this.$forceUpdate();
    },
    //剪辑图片
    crop(data) {
      this.isShowImgCard = false;
      this.asrsc = data.toDataURL();
      let file = dataURLtoFile(data.toDataURL());
      if (
        this.pearit.field_id == "id_card_photo" ||
        this.pearit.field_id == "id_card_emblem"
      ) {
        this.fromList.filter((item) => item.label == "身份证")[0][
          this.pearit.field_id
        ] = [
          {
            url: data.toDataURL(),
            name: "",
          },
        ];
        this.pearit.fileList = [
          {
            url: data.toDataURL(),
            name: "",
          },
        ];
        this.$forceUpdate();
      } else {
        this.pearit.fileList = [
          {
            url: data.toDataURL(),
            name: "",
          },
        ];
      }
      let srt = "img" + this.pearit.field_id;
      if (this.$refs[srt][0]) {
        this.$refs[srt][0].uploadImg(file);
      } else {
        this.$refs[srt].uploadImg(file);
      }
      // console.log()
    },
    //关闭剪辑
    closeCallback() {
      this.isShowImgCard = false;
      let name = document.getElementsByClassName("crop-whole-cover");
      for (const key in name) {
        if (Number(key) || key == 0) {
          let item = name[key];
          document
            .getElementsByClassName("crop-whole-cover")[0]
            .parentNode.removeChild(item);
        }
      }
    },
    //图片编辑
    PictureCard(item, file) {
      console.log(item, "789000");
      this.pearit = item;
      this.isShowImgCard = true;
      this.$nextTick(() => {
        //size
        this.cropParams.size.width = document
          .getElementsByClassName("crop-mask")[0]
          .getElementsByTagName("canvas")[0].width;
        this.cropParams.size.height = document
          .getElementsByClassName("crop-mask")[0]
          .getElementsByTagName("canvas")[0].height;
        this.$forceUpdate();
      });
      this.cropParams.src = file.url;
    },
    //图片背景色更改
    PictureEditBack(item, file) {
      this.showProBack = true;
      this.backPhoto = file.url;
      return;
    },
    //修改背景图片
    checkBackGround(col) {
      this.showProBackLoading = true;
      //'#6495ED'  蓝色
      let color = "#ffffff";
      if (col == 0) {
        color = "#ffffff";
      }
      if (col == 1) {
        color = "#6495ED";
      }
      let setting = JSON.parse(this.init.setting);
      if (setting.backgroundPhoto == "高级") {
        photoMake({
          url: this.formLabelAlign.photo,
          bk: color,
          spec: 1, //一寸 1 二寸 4
        }).then((res) => {
          this.showProBackLoading = false;
          if (res.code == 200) {
            this.backPhoto = res.data.result;
            let url = res.data.result;
            if (process.env.NODE_ENV === "development") {
              url =
                "/photoMake" +
                res.data.result.split("https://oapi.aisegment.com")[1];
            } else {
              url = res.data.result;
            }
            fetch(url, {
              mode: "no-cors",
            })
              .then((res) => {
                return res.blob();
              })
              .then((blob) => {
                this.backPhotoFile = new File([blob], "photo.png", {
                  type: "image/jpeg",
                });
                console.log(this.backPhotoFile);
              })
              .catch((err) => {});
          } else {
            this.$message.error("仅支持人像底色修改!");
          }
        });
      } else {
        // let img = new Image()
        // img.onload = ()=>{
        //   let canvas = document.createElement('canvas')
        //   let ctx = canvas.getContext('2d')
        //   canvas.width = img.width
        //   canvas.height = img.height
        //   ctx.drawImage(img,0,0)
        //   let imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
        //   let pixels = imgData.data
        //   let arr = []
        //   for (let index = 0; index < pixels.length; index+=4) {
        //   }
        // }
      }
      // axios("/taof", "get", {
      //   url: this.formLabelAlign.photo,
      //   col,
      // }).then((res) => {
      //   this.showProBackLoading = false;
      //   if (res.data.code == 200) {
      //     this.backPhoto = res.data.url;
      //     let url = res.data.url;
      //     // if(process.env.NODE_ENV === 'development'){
      //     //   url = '/urlapi'+res.data.url.split('https://cache.wer.plus')[1]
      //     // }else{
      //     //   url = res.data.url
      //     // }
      //     fetch(url, {
      //       mode: "no-cors",
      //     })
      //       .then((res) => {
      //         return res.blob();
      //       })
      //       .then((blob) => {
      //         this.backPhotoFile = new File([blob], "photo.png", {
      //           type: "image/jpeg",
      //         });
      //       })
      //       .catch((err) => {
      //         console.log(err, "2222");
      //       });
      //   } else {
      //     this.$message.error(res.data.msg);
      //   }
      // });
    },
    commitEditPhtot() {
      this.showProBack = false;
      if (this.$refs["imgphoto"][0]) {
        this.$refs["imgphoto"][0].uploadImg(this.backPhotoFile);
      } else {
        this.$refs["imgphoto"].uploadImg(this.backPhotoFile);
      }
      this.fromList.map((item) => {
        if (item.field_id == "photo") {
          item.fileList = [
            {
              url: this.backPhoto,
              name: "",
            },
          ];
        }
      });
    },
    //上传照片时 触发
    upChange(file, label) {
      // console.log(file,fileList,label,'678');
      if (
        label == "photo" &&
        file.size > 102400 &&
        this.http.indexOf("暂无企业") != -1
      ) {
        // 证件照小于100k
        this.sefelfs = label;
        this.$refs["img" + label][0].handleRemove();
        this.$message.error("上传照片不能大于100K!");
      } else {
        if (file.status == "ready") {
          this.arrlist = [];
          console.log(this.$refs["img" + label], "7777");
          this.$refs["img" + label][0].commitUpload();
        }
      }
      if (file.status == "success" && file.response.code == 200) {
        if (label == "last_cert") {
          this.arrlist.push(file.response.data.url);
          this.formLabelAlign.last_cert = JSON.stringify(this.arrlist);
        } else {
          this.formLabelAlign[file.response.data.field] =
            file.response.data.url;
        }
        this.$message.success(file.response.msg);
        if (file.response.data.field == "hukou_photo") {
          this.Arrpass.map((item) => {
            if (item.field_id == "edu_photo") {
              item.selected = 0;
            }
          });
        } else {
          this.Arrpass.map((item) => {
            if (item.field_id == "edu_photo") {
              item.selected = 1;
            }
          });
        }
        if (file.response.data.field == "edu_photo") {
          this.Arrpass.map((item) => {
            if (item.field_id == "hukou_photo") {
              item.selected = 0;
            }
          });
        } else {
          this.Arrpass.map((item) => {
            if (item.field_id == "hukou_photo") {
              item.selected = 1;
            }
          });
        }
        //autographPath1
        // if(file.response.data.field=='jkcns'){
        //     this.autographPath1=file.response.data.url
        // }
      } else if (file.status == "success" && file.response.code != 200) {
        this.$message.error(file.response.msg);
      }
    },
    //删除照片时 触发
    remove(id) {
      this.formLabelAlign[id] = "";
    },
    //提交
    commit() {
      // window.open(this.http+'/user/#/login?username='+this.formLabelAlign.username,'_self')

      let formLabelAlign = {};
      let a = JSON.parse(JSON.stringify(this.formLabelAlign));
      Object.keys(a).map((item) => {
        this.Arrpass.map((el) => {
          if (el.field_id == item) {
            console.log(item, "77888");
            formLabelAlign[item] = a[item];
          }
          if (item == "id_card") {
            formLabelAlign["id_card_emblem"] = a["id_card_emblem"]
              ? a["id_card_emblem"]
              : "";
            formLabelAlign["id_card_photo"] = a["id_card_photo"]
              ? a["id_card_photo"]
              : "";
            delete formLabelAlign[item];
          }
        });
      });
      formLabelAlign.subject_ids = a.subject_ids ? a.subject_ids : "";
      formLabelAlign.subject_id = a.subject_ids
        ? a.subject_ids.split(",")[a.subject_ids.split(",").length - 1]
        : "";
      formLabelAlign.gz = a.gz;
      formLabelAlign.dep = a.dep;
      formLabelAlign.signature = a.signature;
      if (this.platform("yali")) {
        if (formLabelAlign.gz == "一般行业") {
          formLabelAlign.gz = "一般工贸";
        }
        if (formLabelAlign.gz == "危化品") {
          formLabelAlign.gz = "安全管理";
        }
      }
      if (this.platform("dkaq")) {
        if (formLabelAlign.gz == "高危安管") {
          formLabelAlign.gz = "安全管理";
        }
      }
      if (
        this.http.indexOf("bbxdf") != -1 ||
        this.http.indexOf("testtjy") != -1
      ) {
        if (formLabelAlign.extra.address == "") {
          return this.$message.warning("所在地区不能为空");
        }
      }
      console.log(formLabelAlign.extra);
      if (
        this.platformAnhui() &&
        formLabelAlign.gz != "一般工贸" &&
        !formLabelAlign.extra.企业性质
      ) {
        return this.$message.error("请选择企业性质");
      }
      if (
        this.platformAnhui() &&
        formLabelAlign.gz == "特种作业" &&
        !formLabelAlign.extra.注意事项
      ) {
        return this.$message.error("注意事项请签名");
      }
      formLabelAlign.extra = JSON.stringify(formLabelAlign.extra);
      if (this.hutou) {
        formLabelAlign.hutou = this.hutou;
      }
      if (this.shuihao) {
        formLabelAlign.shuihao = this.shuihao;
      }
      if (this.codeChk) {
        formLabelAlign.codeChk = this.codeChk;
      }
      let IDCard =
        /^[1-9]\d{5}(17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/; //身份证号校验
      let phone = /^1[3456789]\d{9}$/; //手机号校验
      for (let i = 0; i < this.Arrpass.length; i++) {
        let items = this.Arrpass[i];
        if (items.field_id == "exam_type" || items.field_type == "download") {
          continue;
        }
        if (
          Boolean(items.selected) &&
          !formLabelAlign[items.field_id] &&
          items.isshow &&
          items.field_id != "cert"
        ) {
          if (items.field_id == "id_card") {
            if (!formLabelAlign["id_card_photo"]) {
              this.$message.warning("身份证人像面" + "不能为空");
              return;
            }
            if (!formLabelAlign["id_card_emblem"]) {
              this.$message.warning("身份证国徽面" + "不能为空");
              return;
            }
            continue;
          }
          this.$message.warning(items.label + "不能为空");
          return;
        }
        if (
          Boolean(items.selected) &&
          items.field_id == "cert" &&
          items.isshow
        ) {
          let obj = JSON.parse(formLabelAlign[items.field_id]);
          if (formLabelAlign[items.field_id] == "[]") {
            this.$message.warning(items.label + "不能为空");
            return;
          }
          let list = JSON.parse(items.options);
          for (let j = 0; j < list.length; j++) {
            if (!obj[list[j].label]) {
              this.$message.warning(list[j].label + "不能为空");
              return;
            }
          }
        }
        if (
          items.field_id == "username" &&
          Boolean(items.selected) &&
          !IDCard.test(formLabelAlign.username)
        ) {
          this.$message.warning("身份证不合法");
          return;
        }
        if (
          items.field_id == "phone" &&
          Boolean(items.selected) &&
          !phone.test(formLabelAlign.phone)
        ) {
          this.$message.warning("手机号码不合法");
          return;
        }
      }

      // return
      if (
        (this.platform("hzdpx") ||
          this.platform("xtaq") ||
          (this.platform("zcaq") && formLabelAlign.gz == "大培训")) &&
        !formLabelAlign.codeChk
      ) {
        return this.$message.error("请输入验证码");
      }
      if (this.platformAnhui()) {
        const obj = getstartInfo() ? JSON.parse(getstartInfo()) : {};
        formLabelAlign.admin_user_id = obj.admin_user_id
          ? obj.admin_user_id
          : "";
        formLabelAlign.depid = obj.depid ? obj.depid : "";
        formLabelAlign.dep = obj.dep ? obj.dep : "";
      }
      if (this.platform("bosheng") && formLabelAlign.gz == "燃气从业人员培训") {
        if (!formLabelAlign.dep) {
          return this.$message.error("请选择部门");
        }
      }
      // return
      this.loading = true;
      applyAdd(formLabelAlign).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          // this.$message.success(res.msg)
          // this.$confirm('报名成功，管理员审核成功后即可开通培训权限','提示',{
          //     confirmButtonText: '确定',
          //     cancelButtonText: '取消',
          //     type: 'success',
          //     showClose:false,
          // }).then(()=>{
          //     this.$router.push('/')
          // }).catch(()=>{})
          // console.log(this.setting)
          if (this.setting.PCwxpay == "是") {
            // 判断是否有在线缴费的权限
            if (Number(this.itemA.price)) {
              //判断该科目是否是在线缴费
              let obj = { applyid: res.data.applyid };
              if (this.http.indexOf("yzza") != -1) {
                obj = { applyid: res.data.applyid, order_type: "报名" };
              }
              maPay(obj).then((res) => {
                if (res.return_msg == "OK") {
                  qrcode({ str: res.code_url }).then((resA) => {
                    if (resA.code == 200) {
                      this.$confirm(
                        `<img src='${resA.data.url}' />`,
                        "请使用微信扫码交费，交费成功后即可开通培训权限进行学习",
                        {
                          dangerouslyUseHTMLString: true,
                          center: true,
                          confirmButtonText: "我已缴费",
                          beforeClose: (action, instance, done) => {
                            if (action == "confirm") {
                              H5PayList(obj).then((resB) => {
                                if (resB.code == 200) {
                                  if (resB.data != "支付成功") {
                                    this.$message.error(
                                      resB.data + ",请联系管理员"
                                    );
                                  } else {
                                    this.$message.success(
                                      "支付成功,2秒后自动跳转至登录页面"
                                    );
                                    setTimeout(() => {
                                      window.open(this.http + "/user", "_self");
                                    }, 2000);
                                    done();
                                  }
                                } else {
                                  Message.error(resB.msg);
                                }
                              });
                            } else {
                              done();
                            }
                          },
                        }
                      );
                      // window.open(resA.data.url)
                    }
                  });
                }
              });
              // this.$confirm('请点击下方培训交费按钮进行交费，交费成功后即可开通培训权限进行学习','提示',{
              //     confirmButtonText: '培训缴费',
              //     cancelButtonText: '取消',
              //     type: 'success',
              //     showClose:false,
              //     // beforeClose: (action, instance, done) => {
              //     //     if (action == 'confirm') {
              //     //         H5PayList({applyid:res.data.applyid}).then(resA=>{
              //     //             if(resA.code == 200){
              //     //                 if(resA.data!='支付成功'){
              //     //                     H5Pay({applyid:res.data.applyid}).then(resB=>{
              //     //                         if(resB.code==200){
              //     //                             window.open(resB.data)
              //     //                             done();
              //     //                         }else{
              //     //                             this.$message.error(resB.msg)
              //     //                             done();
              //     //                         }
              //     //                     })
              //     //                 }else{
              //     //                     this.$message.success('支付成功，正在跳转')
              //     //                     done();
              //     //                 }
              //     //             }else{
              //     //                 this.$message.error(resA.msg)
              //     //                 done();
              //     //             }
              //     //         })

              //     //         // H5Pay({applyid:res.data.applyid}).then(resA=>{
              //     //         //     done();
              //     //         //     console.log(resA)
              //     //         //     if(res.code==200){

              //     //         //     }
              //     //         // })
              //     //     } else {
              //     //         done();
              //     //     }
              //     // }
              // }).then(()=>{

              // }).catch(()=>{})
            } else {
              this.$confirm(
                "报名成功，管理员审核成功后即可开通培训权限",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "success",
                  showClose: false,
                }
              )
                .then(() => {
                  this.$router.push("/");
                })
                .catch(() => {});
            }
          } else {
            this.$confirm(
              this.platform("hzdpx") ||
                this.platform("xtaq") ||
                (this.platform("zcaq") && formLabelAlign.gz == "大培训")
                ? "报名成功"
                : "报名成功，管理员审核成功后即可开通培训权限",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
                showClose: false,
              }
            )
              .then(() => {
                if (
                  this.platform("hzdpx") ||
                  this.platform("xtaq") ||
                  (this.platform("zcaq") && formLabelAlign.gz == "大培训")
                ) {
                  window.open(
                    this.http +
                      "/user/#/login?username=" +
                      formLabelAlign.username,
                    "_self"
                  );
                } else {
                  this.$router.push("/");
                }
              })
              .catch(() => {});
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    lazyLoad(node, resolve) {
      let id = node.data ? node.data.region_id : 0;
      regionList({ region_pid: id }).then((res) => {
        resolve(res.data.list);
      });
    },
    //
    downloadImg2(data) {
      const { appendix } = data;
      appendix.map((item) => {
        downloadAll(item.src, item.name);
      });
      // downloadAll("https://xinhua.taijieyun.com/storage/userimage/xinhua/20221227/0aeedb419f2afbb56415242c6dfd8505.docx",'')
      // if(this.platformAnhui()&&this.platformAnhui().length!=0){
      //   this.platformAnhui().forEach(item=>{
      //     if(item.gz.includes(this.formLabelAlign.gz)&&item.name==name){
      //       downloadAll(item.filePath, item.name);
      //     }
      //   })
      // }
      // if(this.platform('xinhua')){
      //   window.open("https://xinhua.taijieyun.com/storage/userimage/xinhua/20221227/0aeedb419f2afbb56415242c6dfd8505.docx");
      // }
      // if (this.formLabelAlign.gz == "特种作业") {
      //   downloadAll("https://dkaq.taijieyun.com/storage/userimage/dkaq/20221114/983a84f2eeccb07ac44bfdea89ee2571.doc", "特种作业操作证考核申请表");
      // }
      // if (this.formLabelAlign.gz == "一般工贸" || this.formLabelAlign.gz == "安全管理") {
      //   downloadAll("https://dkaq.taijieyun.com/storage/userimage/dkaq/20221114/6182ba9e60c9500b76c52c3f42fca0d9.doc", "安全员登记表");
      // }
    },
    downloadImg3() {
      if (
        this.formLabelAlign.gz == "一般工贸" ||
        this.formLabelAlign.gz == "高危安管"
      ) {
        downloadAll(
          "https://dkaq.taijieyun.com/storage/userimage/dkaq/20221114/fdf8c2f000a3becdbf5ca52495aa44dd.docx",
          "安全员登记表"
        );
      }
    },
    //打开签名
    writeName(item, id) {
      const { field_id, label } = item;
      let name = field_id;

      if (name == "jkcns") {
        if (!this.formLabelAlign.nickname) {
          return this.$message.error("姓名不能为空");
        }
        if (!this.formLabelAlign.username) {
          return this.$message.error("身份证号不能为空");
        }
        if (!this.subjectTitle) {
          // console.log(this.subjectTitle, "77");
          return this.$message.error("请选择培训科目后再签名");
        }
      }
      this.openBookalert(item, label).then((res) => {
        if (res) {
          this.fileNameWirth = name;
          this.DOMID = id;
          this.dialogShow = true;
          this.$nextTick(() => {
            this.$refs.autograph.clear();
            this.canvasdata = this.$refs.autograph.commit();
          });
        }
      });
    },
    //打开承诺书
    openBook() {
      //  this.DomImgShow=true
      this.$alert(
        "本人身体健康，无妨碍从事相应特种作业的器质性心脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、痴呆症以及其他疾病和生理缺陷。本人对以上信息的真实性负责，如有隐瞒，相关责任全部由本人承担。",
        "健康承诺",
        {
          confirmButtonText: "确定",
        }
      );
    },
    //注意事项
    openBookshixiang() {
      //  this.DomImgShow=true
      this.$alert(
        "视频学习卡激活后，一律不退费！考试二次机会，二次不通过，重新报名，有效期一年！报考人员必须完成培训大纲学时，理论线上培训，实操线下培训，如果出现缺课，签到漏签，代签情况，不安排考试！培训结束后，学员自行缴纳考试费，因延误交款影响考试，不安排考试学员自行承担后果！本人已经认真阅读培训大纲和考核标准。",
        "注意事项",
        {
          confirmButtonText: "确定",
        }
      );
    },
    //通用弹出提醒
    openBookalert(data, title) {
      console.log(data, "678");
      const { field_id } = data;
      const h = this.$createElement;
      //  this.DomImgShow=true  formLabelAlign
      if (!this.subjectTitle && field_id == "cxsm") {
        return this.$message.error("请选择培训科目不能为空");
      }
      var msg = data.options;
      if (field_id == "cxsm") {
        msg = `本人符合(${
          this.formLabelAlign.gz == "特种作业"
            ? "特种作业人员"
            : this.subjectTitleList[0]
        })安全生产知识和管理能力考核合格证考试条件，在表中填写的个人信息和提供的身份证明等内容是真实的(本人提供的身份证明等内容由培训机构留存)`;
      }
      if (field_id == "jkcns") {
        msg =
          "本人身体健康，无妨碍从事相应特种作业的器质性心脏病、癫痫病、美尼尔氏症、眩晕症、癔病、震颤麻痹症、精神病、痴呆症以及其他疾病和生理缺陷。本人对以上信息的真实性负责，如有隐瞒，相关责任全部由本人承担。";
      }
      if (field_id == "sqbqm" && this.formLabelAlign.gz == "特种作业") {
        msg =
          "本人符合《特种作业人员安全技术培训考核管理规定》(国家安全监管总局令第30号)第四条 规定的条件，并按规定参加相应的安全技术理论培训和实际操作培训。";
      }
      if (field_id == "sqbqm" && this.formLabelAlign.gz == "安全管理") {
        msg =
          "本人符合《生产经营单位安全培训规定》(国家安全监管总局令第3号)有关 规定参加相应的安全培训。";
      }
      if (field_id == "注意事项" && this.platform("dkaq")) {
        msg =
          "1.报名成功后，一个月以内，扣费100元！（包含视频学习卡，材料费，照片费，人工服务费）一个月以后或参加过培训一律不退费！ 2.理论实操各二次机会，二次不合格，重新报名！ 3.报名开始计算一年内有效，一年内不考，重新报名！（如遇不可抗拒因素，适当延期） 4.报考学员，必须完成各工种培训大纲学时，理论线上视频课程，不完成一律不安排考试，实操线下培训，必须参加。如遇缺课，漏签，代签，不完成一律不安排考试，培训结束后，会收到短信通知，学员自行缴纳考试费，初训（理论考试费50元，实操考试费110元），复训（理论考试费50元）学员延迟缴费，出现上诉以上问题，不能考试，学员自行承担后果！ 5.本校只提供开局培训费发票，考试费发票学员自行打印，（考试费需要报销学员，考试注册时候一定要填写正确的企业名称） 6. 一般工贸和危化经营生产主要负责人，管理员不用缴纳考试费  7.报考人员年龄限制18岁-60岁";
      }
      if (field_id == "注意事项" && this.platform("xcaq")) {
        msg =
          "1.报名成功后，一周以内，扣费100元！（包含视频学习卡，材料费，照片费，人工服务费）一周以后一律不退费！ 2.理论实操各二次机会，二次不合格，重新报名！ 3.报名开始计算一年内有效，一年内不考，重新报名！（如遇不可抗拒因素，适当延期） 4.报考学员，必须完成各工种培训大纲学时，理论线上视频课程，不完成一律不安排考试，实操线下培训，必须参加。如遇缺课，漏签，代签，不完成一律不安排考试，培训结束后，会收到短信通知，学员自行缴纳考试费，初训（理论考试费50元，实操考试费110元），复训（理论考试费50元）学员延迟缴费，出现上诉以上问题，不能考试，学员自行承担后果！ 5.本校只提供开局培训费发票，考试费发票学员自行打印，（考试费需要报销学员，考试注册时候一定要填写正确的企业名称） 6. 一般工贸和危化经营生产主要负责人，管理员不用缴纳考试费  7.报考人员年龄限制18岁-60岁";
      }
      if (field_id == "cnsx") {
        msg = `1.本人身体健康，无妨碍从事相应特种作业的器质性心脏病、癫痫病、美尼尔氏症、
                眩晕症、癔病、震颤麻痹症、精神病、痴呆症以及其他疾病和生理缺陷；2.以上所填写的
                本人信息及提供的身份证复印件、学历证书复印件等材料真实有效；3.本人按《特种作业
                人员安全技术培训考核管理规定》（国家安全监管总局令第30号）有关规定参加相应的
                安全技术理论培训和实际操作培训4.以上个人信息和承诺事项以及提供的有关材料，如
                有弄虚作假或欺骗等行为，自愿被依法撤销《中华人民共和国特种作业操作证》，3年内
                不再申请办证。`;
      }
      if (field_id == "cnx") {
        msg = `本人承诺，以上填写的个人信息和提供的身份证复印件、学历证书复印件及个人健康承诺书内容真实。`;
      }
      if (this.platform("kaiqi") && field_id == "zqtys") {
        msg = h("el-image", {
          style: {
            width: "100px",
            height: "100px",
          },
          props: {
            src: require("../../components/img/kaiqi/1.png"),
            "preview-src-list": [
              require("../../components/img/kaiqi/1.png"),
              require("../../components/img/kaiqi/2.png"),
            ],
          },
        });
      }
      if (this.platform("ddrc") && field_id == "zqtys") {
        msg = h("el-image", {
          style: {
            width: "100px",
            height: "100px",
          },
          props: {
            src: require("../../components/img/ddrc/1.png"),
            "preview-src-list": [
              require("../../components/img/ddrc/1.png"),
              require("../../components/img/ddrc/2.png"),
            ],
          },
        });
      }

      if (
        // (this.platform("dlgd") ||
        //   this.platform("dlld") ||
        //   this.platform("yjq") ||
        //   this.platform("dlzyaq") ||
        //   this.platform("dlxh") ||
        //   this.platform("mkah")) &&
        field_id == "CNBook"
      ) {
        msg = h("el-image", {
          style: {
            width: "100px",
            height: "100px",
          },
          props: {
            src: require("../../components/img/dlld/cnbook.png"),
            "preview-src-list": [
              require("../../components/img/dlld/cnbook.png"),
            ],
          },
        });
      }
      if (this.platform("mingda") && field_id == "zqtys") {
        msg = h("el-image", {
          style: {
            width: "100px",
            height: "100px",
          },
          props: {
            src: require("../../components/img/mingda/1.png"),
            "preview-src-list": [require("../../components/img/mingda/1.png")],
          },
        });
      }
      if (field_id == "fwxy") {
        msg = h("el-image", {
          style: {
            width: "100px",
            height: "100px",
          },
          props: {
            src: "https://lyky.taijieyun.com/storage/userimage/lyky/20230523/35e1f152e87a67bac254642ef3eebd2c.png",
            "preview-src-list": [
              "https://lyky.taijieyun.com/storage/userimage/lyky/20230523/35e1f152e87a67bac254642ef3eebd2c.png",
            ],
          },
        });
      }
      return new Promise((resolve) => {
        this.$alert(msg, title, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
        })
          .then(() => {
            resolve(true);
          })
          .catch(() => {
            resolve(false);
          });
      });
    },
    //证件办理费用协议
    openBookXY() {
      //  this.DomImgShow=true
      this.$alert(
        " 一、甲方依据相关规定收取乙方培训、考试、办理及发放证件等费用，并依法对乙方提供相关服务。二、乙方必须按甲方规定时间进行培训、考试及取证，因乙方个人原因及行为不能按时参加培训、考试及无法取证者，甲方不予退费。三、从报名开始，六个月之内必须考完，否则视为自动放弃。四、代办人员需将本协议告知学员本人。",
        "证件办理费用协议",
        {
          confirmButtonText: "确定",
        }
      );
    },
    openBookXl() {
      if (!this.formLabelAlign.education) {
        return this.$message.error("请选择您的学历!");
      }
      this.$alert(
        `我承诺：本人具有${this.formLabelAlign.education}学历，以上内容真实有效，如有虚假，本人愿意承担相应责任`,
        "学历承诺",
        {
          confirmButtonText: "确定",
        }
      );
    },
    //示例图片
    openDefimg(path) {
      this.$alert(
        `<div style="display: flex;justify-content: center;align-items: center;background:#eee;"><img src="${path.src}" style="height:313px;width:206.5px;" alt="示例图片"></div>`,
        "示例图片",
        {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
        }
      );
    },
    //提交签名图片
    async submit(file) {
      // dialogShow = false
      if (this.canvasdata === this.$refs.autograph.commit()) {
        return this.$message.error("请签名后提交");
      }
      this.autographPath = this.$refs.autograph.commit();
      // if (!this.DOMID){
      //   this.formLabelAlign.extra[this.fileNameWirth] = this.$refs.autograph.commit();
      // }else{
      //   this.formLabelAlign[this.fileNameWirth] = this.$refs.autograph.commit();
      // }
      // console.log(this.formLabelAlign,'7777');
      // return
      // if (!this.DOMID) {
      //   if(this.fileNameWirth=='注意事项'){
      //     this.autographPath4 = this.$refs.autograph.commit(); //注意事项
      //   }
      //   if(this.fileNameWirth=='cxsm'){
      //     this.autographPath5 = this.$refs.autograph.commit(); //注意事项
      //   }else
      //   if(this.fileNameWirth=='cnsx'){
      //     this.autographPath6 = this.$refs.autograph.commit(); //注意事项
      //   }else
      //   if(this.fileNameWirth=='zqtys'){
      //     this.autographPath7 = this.$refs.autograph.commit(); //注意事项
      //   }
      //   else if(this.fileNameWirth=='cnx'){
      //     this.autographPath8 = this.$refs.autograph.commit(); //注意事项
      //   }
      // }
      let field_type = "sign";
      this.fromList.map((item) => {
        if (item.field_id == this.fileNameWirth) {
          field_type = item.field_type;
        }
      });
      await upFileqm(this.autographPath, this.formLabelAlign.nickname, {
        field: "signature",
      }).then((res) => {
        if (res.code == 200) {
          this.formLabelAlign.signature = res.data.url;
          this.formLabelAlign[this.fileNameWirth] = res.data.url;
          if (this.DOMID) {
          } else {
            this.formLabelAlign.extra[this.fileNameWirth] = res.data.url;
            this.$message.success("提交成功");
            this.dialogShow = false;
          }
          this.$forceUpdate();
          // if (this.platformAnhui()) {
          //   this.formLabelAlign.extra[this.fileNameWirth] = res.data.url;

          //   this.$message.success("提交成功");
          //   this.dialogShow = false;
          // }
        } else {
          if (!this.DOMID) {
            this.dialogShow = false;
            this.$message.error("签名失败");
          }
        }
      });
      if (field_type != "sign") {
        setTimeout(() => {
          console.log(1235458582);
          upFile(
            this.formLabelAlign.nickname + this.fileNameWirth,
            { field: this.fileNameWirth },
            this.DOMID
          ).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              // this.autographPath = res.data.url
              this.formLabelAlign[this.fileNameWirth] = res.data.url;
              this.dialogShow = false;
            } else {
              this.$message.error("签名失败");
            }
          });
        }, 500);
      }
    },
    //下载学历承诺书
    downReader() {
      download(
        "https://lyky.taijieyun.com/template/lyky/%E5%AD%A6%E5%8E%86%E6%89%BF%E8%AF%BA%E4%B9%A6.docx",
        "学历承诺书.docx"
      );
    },
    //下载健康查体表
    downFuled(files) {
      files.map((item) => {
        download(item.src, item.name);
      });
      // download("https://lyky.taijieyun.com/template/lyky/%E4%BD%93%E6%A3%80%E8%A1%A8.doc", "健康查体表.doc");
      //https://lyky.taijieyun.com/template/lyky/%E4%BD%93%E6%A3%80%E8%A1%A8.doc
    },
    //太化 提交
    commitA() {
      if (this.$refs.taihua.commit()) {
        let objA = this.$refs.taihua.commit()[0];
        let objB = this.$refs.taihua.commit()[1];
        this.loading = true;
        applyAdd({ ...objA, extra: JSON.stringify(objB) }).then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$confirm(
              "报名成功，管理员审核成功后即可开通培训权限",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
                showClose: false,
              }
            )
              .then(() => {
                this.$router.push("/");
              })
              .catch(() => {});
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
.crop-component .crop-btns .crop-around {
  width: 160px;
  height: 40px;
  border: 1px solid #222222;
  border-radius: 48px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  margin-right: 36px;

  &:after {
    content: "旋转90度";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #222;
    text-align: center;
    line-height: 40px;
  }
}
</style>
<style lang="scss" scoped>
.big_box {
  background: url("~@/assets/BmBj.jpg");
  background-size: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  // overflow: auto;
}

.conter_box {
  display: flex;
  // justify-content: center;
  // align-items: center;
  width: 63%;
  height: 65%;

  // background: #fff;
  .conter_item_left {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 45%;

    .img_box {
      width: 80px;
      height: 80px;
      margin-bottom: 40px;

      img {
        width: 100%;
      }
    }

    .box_title {
      p {
        color: #fff;
        font-size: 3.7vh;
        margin: 0;

        &::before {
          content: "";
          display: block;
          margin-bottom: 40px;
          width: 28px;
          height: 4px;
          background: #fff;
        }
      }
    }

    .no_copy {
      color: #fff;
      font-size: 14px;
      width: 100%;
    }
  }

  .conter_item_right {
    flex: 1;
    // background: #f0f;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .positionA {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 90%;
      height: 80%;
      background: #fff;
      opacity: 0.2;
      border-radius: 24px;
    }

    .positionB {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 80%;
      height: 90%;
      opacity: 0.2;
      background: #fff;
      border-radius: 24px;
    }

    .positionC {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 70%;
      height: 100%;
      background: #fff;
      border-radius: 24px;

      .box_form {
        padding: 36px 0;
        height: 100%;
        display: flex;
        flex-direction: column;

        // align-items: center;
        .box_form_title {
          display: flex;
          justify-content: center;
        }

        p {
          font-size: 24px;
          font-weight: 600;
          padding-bottom: 36px;
        }

        .el-form-item {
          margin-bottom: 16px;
        }

        .el-select {
          width: 100%;
        }

        .el-form {
          height: calc(100% - 100px);
          overflow: auto;
          padding: 0 24px;

          &::-webkit-scrollbar {
            width: 5px;
            //   height:5px;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 15px;
            // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0, 0, 0, 0.2);
          }

          &::-webkit-scrollbar-track {
            // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
          }

          ::v-deep {
            .ant-input {
              height: 40px;
            }

            .el-cascader {
              width: 100% !important;
            }

            .el-date-editor {
              width: 100% !important;
            }
          }

          .classJson {
            ::v-deep {
              & > .el-form-item__content {
                margin-left: 0 !important;
              }
            }
          }
        }

        .el-button {
          font-size: 12px;
          padding: 10px 20px;
        }

        // .el-input__inner{
        //     height: ;
        // }
      }
    }
  }
}

@media screen and (min-height: 890px) and (max-height: 960px) {
  ::v-deep {
    .el-form {
      max-height: calc(100% - 100px) !important;
    }
  }
}

@media screen and (min-height: 820px) and (max-height: 890px) {
  ::v-deep {
    .el-form {
      max-height: calc(100% - 100px) !important;
    }
  }
}

@media screen and (min-height: 760px) and (max-height: 820px) {
  ::v-deep {
    .el-form {
      max-height: calc(100% - 100px) !important;
    }
  }

  .conter_box {
    height: 80%;
    width: 75%;
  }
}

@media screen and (min-height: 650px) and (max-height: 760px) {
  ::v-deep {
    .el-form {
      max-height: calc(100% - 100px) !important;
    }

    .el-form-item__label {
      line-height: 32px;
    }

    .el-form-item__content {
      line-height: 32px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
      }
    }

    .ant-input {
      height: 32px;
    }

    .el-select {
      line-height: 32px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }

        .el-input__suffix {
          line-height: 32px;

          .el-input__suffix-inner {
            line-height: 32px;

            .el-select__caret {
              line-height: 32px;
            }
          }
        }
      }
    }

    .el-button {
      font-size: 12px;
      padding: 8px 16px;
    }

    .conter_box {
      height: 85%;
      width: 75%;
    }
  }
}

@media screen and (max-height: 650px) {
  ::v-deep {
    .el-form {
      max-height: calc(100% - 100px) !important;
    }
  }

  .conter_box {
    height: 90%;
    width: 75%;
  }
}

::v-deep {
  .el-form-item__content {
    line-height: 16px !important;
  }

  .el-range-separator {
    width: 10% !important;
  }

  // .crop-around{
  //   &::after{
  //     content: '旋转90度';
  //   }
  // }
}

.DomImg {
  position: absolute;
  z-index: -5;
  background: #fff;

  .A4page {
    width: calc(595.28px);
    height: calc(841.89px);
    // background:url('~@/assets/logo/pdfbg.png') no-repeat;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    color: #000;
    position: relative;
    padding: 70px 70px;

    u {
      // text-decoration:underline;
      border-bottom: 1px solid #333;
      // display: inline-block;
      // padding:0 80px;
    }

    p {
      margin: 0;
      font-size: 16px;
      line-height: 40px;
    }

    h1 {
      text-align: center;

      // font-weight: 600;
      font-size: 20px;
    }
  }
}

#DomImgzjbl {
  top: 0;

  // z-index: 5;
  .A4page {
    padding: 40px 70px;

    p {
      line-height: 30px;
    }
  }
}
</style>
